/* 공통 */
#c1_wrap .c_inner{ width: 1300px; margin:0 auto; position: relative; }
#c1_wrap .c_title h1 {font-size:48px; font-weight: 800; color:#000; font-family: 'NanumSquare',sans-serif;}


/*Content CSS*/
#c1_wrap {height: 80vh; min-height: 800px; background-color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; }
#c1_wrap .list {display: flex; justify-content: space-between; margin-top:70px; width: 100%;}
#c1_wrap .list li {width: 410px;}
#c1_wrap .list li a {display: block; width: 100%; height: 500px; background-color: #fff; overflow: hidden;   box-shadow: 2.8px 1.2px 24px 0 rgba(108, 154, 255, 0.22);
position: relative; }
#c1_wrap .list li .img {width: 100%; height: 250px; }
#c1_wrap .list li .cont .txt {height: 250px; position: relative; padding:55px 30px 0;}
#c1_wrap .list li .cont .txt::before {content: ''; display: block; width: 4px; height: 55px; background-color: #0050ff; position: absolute; left:50%; transform:translateX(-50%);
top:-27px;}
#c1_wrap .list li .txt h1 {font-size:28px; font-weight: 700; color:#000; font-family: 'NanumSquare',sans-serif; }
#c1_wrap .list li .txt p {font-size:16px; font-weight: 300; line-height: 30px; color:#666; margin-top:15px; }
/* cover */
#c1_wrap .list li .cover {position: absolute; left:0; top:0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
background: url('./img/c2.png') 50% 50% no-repeat;  background-size: cover; transition: opacity .3s ease; opacity: 0; }
#c1_wrap .list li .cover .txt h1, #c1_wrap .list li .cover .txt p {color:#fff;}
#c1_wrap .list li .cover .arrow {margin-top:50px; }
/* cover img */
#c1_wrap .list li:nth-child(2) .cover {background-image:url('./img/c1.png') ;}
#c1_wrap .list li:nth-child(3) .cover {background-image:url('./img/c3.png') ;}
/* hover */
#c1_wrap .list li a:hover .cover {opacity: 1; }




@media screen and (max-width:1700px) {
}

@media screen and (max-width: 1300px) {
    /* 공통 */
    #c1_wrap .c_inner {width: 100%; padding: 0 80px; }

    #c1_wrap .list li {width: calc(33.3% - 15px);}
    #c1_wrap .list li a {height: 100%; }
    #c1_wrap .list li .img, #c1_wrap .list li .cont .txt {height: auto ;}
    #c1_wrap .list li .img img {width: 100%;}
    #c1_wrap .list li .cont .txt {padding:50px 25px;}
    #c1_wrap .list li .txt h1 {font-size:22px;}
    #c1_wrap .list li .txt p {font-size:14px; letter-spacing: -.5px; line-height: 26px; word-break: keep-all;}
    #c1_wrap .list li .txt p br {display: none; }
    #c1_wrap .list li .cover {padding:0 25px;}

}

@media screen and (max-width: 1024px) {
    /* 공통 */
    #c1_wrap {height:auto; min-height: auto; padding:100px 0;}
    #c1_wrap .c_inner {width: 100%; padding: 0 50px; }
    #c1_wrap .c_title h1 {font-size:38px;}

    #c1_wrap .list {margin-top:50px;}
    #c1_wrap .list {flex-direction: column;}
    #c1_wrap .list li {width: 100%; margin-bottom: 30px; }
    #c1_wrap .list li:last-child {margin-bottom: 0; }
    #c1_wrap .list li .cont {display: flex; width: 100%;}
    #c1_wrap .list li .cont .img {width: 40%;overflow: hidden; }
    #c1_wrap .list li .cont .img img {height: 100%; width: auto; position: relative; left:50%; transform:translateX(-50%);}
    #c1_wrap .list li .cont .txt {width: 60%; padding:40px 25px; text-align: left; }
    #c1_wrap .list li .cont .txt::before {display: none;}
    #c1_wrap .list li .cont .txt h1::before {content: ''; display: block; width: 40px; height: 3px; background-color: #0050ff; margin:0 0 20px;}
    #c1_wrap .list li .cover {display: none;}

}

@media screen and (max-width: 960px) {

}

@media screen and (max-width: 640px) {
    /* 공통*/
    #c1_wrap {padding:50px 0;}
    #c1_wrap .c_inner {width: 100%; padding: 0 30px; }
    #c1_wrap .c_title h1 {font-size:32px;}

    #c1_wrap .list {margin-top:40px;}
    #c1_wrap .list .cont {flex-direction: column;}
    #c1_wrap .list li .cont .img {width: 100%;overflow: hidden; }
    #c1_wrap .list li .cont .img img {height: auto; width: 100%; left:0%; transform:translateX(-0%);}
    #c1_wrap .list li .cont .txt {width: 100%; text-align: center; }
    #c1_wrap .list li .cont .txt h1::before {margin:0 auto 20px;}

}

@media screen and (max-width: 375px) {
    /* 공통*/
    #c1_wrap .c_inner  {padding: 0 15px; }
    #c1_wrap .c_title h1 {font-size:26px;}

}